import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'amfe-flexible' // 引入flexible.js -> 设置根标签的字体大小（移动端的适配）
import {
  NavBar, Form, Field, Button, Tabbar, TabbarItem, Icon, Tab, Tabs, Cell,
  List, PullRefresh, ActionSheet, Popup, Row, Col, Badge, Search, Image as VanImage, Divider, CellGroup, Tag, Dialog,
  DatetimePicker
} from 'vant' // 引入vant的导航栏

Vue.use(DatetimePicker)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(CellGroup)
Vue.use(Divider)
Vue.use(VanImage)
Vue.use(Search)
Vue.use(Row)
Vue.use(Col)
Vue.use(Badge)
Vue.use(Popup) // 弹出层
Vue.use(ActionSheet) // 动作面板
Vue.use(PullRefresh) // 下拉刷新
Vue.use(List) // 加载更多
Vue.use(Cell)
Vue.use(Tab) // 每一个标签项目
Vue.use(Tabs) // 标签页
Vue.use(Icon) // 图标组件
Vue.use(Button) // 按钮组件
Vue.use(Tabbar) // 底部导航组件
Vue.use(TabbarItem) // 底部导航项目组件
Vue.use(NavBar) // 导航栏组件
Vue.use(Form) // 表单组件
Vue.use(Field) // 表单项组件
Vue.config.productionTip = false

// 封装中间件函数插件
// install方式的插件，其实就是方便把插件注册到Vue对象上。
// 就是把插件挂载在Vue对象下，这样在其他的地方使用时，可以不用引入Vue（就像Vue内置的功能一样使用，比如指令、方法、属性等）
const directiveObj = {
  install (Vue) {
    Vue.directive('fofo', {
      // inserted函数表示当绑定了该指令的元素被插入到dom时候会自动触发,即页面打开后，自动聚焦到input标签中
      inserted (el) {
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          // el本身不是输入框，尝试往里面获取
          setTimeout(() => {
            const theInput = el.querySelector('input')
            const theTextArea = el.querySelector('textArea')
            // 判断是获取到的是input还是thetextarea
            if (theInput) theInput.focus()
            if (theTextArea) theTextArea.focus()
          })
        }
      },
      update (el) {
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          // el本身不是输入框，尝试往里面获取
          setTimeout(() => {
            const theInput = el.querySelector('input')
            const theTextArea = el.querySelector('textArea')
            // 判断是获取到的是input还是thetextarea
            if (theInput) theInput.focus()
            if (theTextArea) theTextArea.focus()
          })
        }
      }
    })
  }

}
// use这个方法就是会执行目标对象里面的install方法并传入Vue类
Vue.use(directiveObj)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
